import React, { Component } from 'react';
import {
  TweenMax,
  Sine,
  TimelineMax
} from 'gsap/TweenMax';
import ReactSVG from 'react-svg'
import product from '../../imgs/product.svg';

class Shopping extends Component {
  constructor(props) {
    super(props)

    this.state = {}
  }

  componentDidMount() {
    const aaa = document.querySelector('[id=aaa]')
    TweenMax.to(aaa, 1, {x:100, rotationX:300});
  }
  init() {
    const list = document.getElementById('poly-shapemorph')
    const paths = document.getElementById('paths')
    // 添加动画
    /* 参数说明：1. 元素
    2. 持续时间（s）
    3. 对象 :变化的属性->值
    4. 【可选】动画延迟发生时间 (可写数字，“-=0.5”，“+=0.5“)
    */
    TweenMax.to(list, 2, {
      morphSVG: 'M0.39 0.34H15.99V22.44H0.39z',
      // ease: Sine.easeIn
    })
    console.log(8888)

    TweenMax.set(paths, {
      opacity: 1
    })
    // TweenMax.staggerFromTo(paths.childNodes, 5, {
    //   drawSVG: false
    // }, {
    //   drawSVG: true,
    //   ease: Sine.easeOut
    // }, -0.1)
  }


  render() {
    return (
      <div className="svgs">
        <ReactSVG src={product}
                  // svg加载完成
                  onInjected={ svg => this.init()} />
        <div id="aaa" style={{width:'100px',height:'100px',background:'#000'}}>aaaaaaaa</div>
      </div>
    );
  }
}

export default Shopping;
